<template>
  <div class="mall_header">
    <div class="main">
        <div class="index">
            <div class="index_item">
                <a href="/mall/first">首页</a>
            </div>
            <div class="index_item">
                <a href="/mall/category">商品</a>
            </div>
        </div>
    <div class="items">
        <div class="item">
            <router-link to="/mall/my_order">个人中心</router-link>
        </div>
        <div class="item">
            <a href="/mall/cart">购物车</a>
        </div>
        <div class="item">
            <a href="#" @click="toService">客服中心</a>
        </div>
        <div class="item"> 
            <a href="#" @click="toAboutUs">关于我们</a>
        </div>
        <div class="item">
            <el-dropdown style="width: 120px;cursor: pointer;text-align:center">
                <a href="#javascript;">{{ str }}</a>
                <el-dropdown-menu slot="dropdown" style="width: 120px;text-align: center;margin-top: 10px;">
                    <!-- <el-dropdown-item style="font-size: 16px" v-if="role=='管理员'?true:false">
                    <router-link to="/person" style="text-decoration: none;color: black">个人信息</router-link>
                    </el-dropdown-item> -->
                    <el-dropdown-item style="font-size: 16px" v-if="role=='管理员'?true:false">
                        <router-link to="/manage/home" style="text-decoration: none;color: black">后台管理</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item style="font-size: 16px">
                    <span style="text-decoration: none" @click="logout">退出商城</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    </div>
    
  </div>
</template>

<script>
import Bus from '../../../Bus'
import { getUserId } from '@/utils/getUserId'
export default {
    
    name:'MallHeader',
    data(){
        return{
            items:[
                {name:'我的订单'},
                {name:'我的购物车'},
                {name:'会员中心'},
                {name:'关于我们'},
                {name:''},
            ],
            user:{},
            str:'',
            role:''
        }
    },
    methods:{
        async getUserInfo(){
            this.user=JSON.parse(sessionStorage.getItem('user'))
            this.str=this.user.username+'已登录'
            let token=this.user.token
            let id =getUserId(token)
            let res=await this.request.get('/user/'+`${id}`)
            this.role=res.data.role
            // this.role=this.user.role
            // this.$set(this.items,this.items.length-1,{name:str})
            // console.log(this.items);
            
            // console.log(this.items[this.items.length-1].name);
            // console.log(this.items);
        },
        // 跳转“客服中心”新页面
        toService(){
            let routeData=this.$router.resolve({path:'/service'})
            window.open(routeData.href,'_blank')
        },
        // 跳转关于我们
        toAboutUs(){
            let routeData=this.$router.resolve({path:'/about_us'})
            window.open(routeData.href,'_blank')
        },
        logout(){
            sessionStorage.removeItem('user')
            this.$router.push('/login')
        },
    },
    mounted(){
        this.getUserInfo()
        Bus.$on('前台登录',(data)=>{
            this.user=data
            this.str=this.user.username+'已登录'
            this.role=data.role
        })
        // setTimeout(() => {
        //     this.getUserInfo()
        // }, 100);
        
    }

}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
a{
    color:#cdcdcd
}
a:hover{
    color: rgb(39,186,155);
}
.mall_header{
    width: 100%;
    height: 3.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}
.main{
    width: 80%;
    height: 3.6vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.index{
    color:#cdcdcd;
    width: 10%;
    height: 3.6vw;
    display: flex;
    justify-content: space-between;
    /* background-color: red */
}
.index_item{
    position: relative;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: skyblue; */
}
.index_item a{
    font-size: 1.2vw;
}
/* .index_item:first-child::after{
    content: "";
    width: 1px;
    height: 12px;
    display: block;
    position: absolute;
    top: 22px;
    left: 4vw;
    background: white;
} */
.items{
    /* background-color: pink; */
    width: 500px;
    height: 80%;
    /* background-color: pink; */
    display: flex;
    justify-content: right;
    align-items: center;
    /* margin-right: 100px; */
}
.item{
    /* background-color: orange; */
    position: relative;
    width: 80px;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-left: 5px;
    border-left: 1px solid white;
    /* float: left; */
}
.item a{
    
    text-align: center;
    font-size:1.1vw
}
/* .item::after{
    content: "";
    width: 1px;
    height: 12px;
    display: block;
    position: absolute;
    top: 22px;
    left: 90px;
    background: white;
} */
.item:last-child{
    padding-right: 5px;
    width: 120px;
}
.item:first-child{
    border-left: none;
    /* display: none; */
}
</style>